import './index.less';

import { UserOutlined } from '@ant-design/icons';
import { Col, Popover, Row } from 'antd';
import { observer } from 'mobx-react';
import { FC, useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useLocation } from 'react-router-dom';

import RootStore from '@/store/root';

export interface NavItem {
  name: string;
  link: string;
}

interface Props {
  systemName: string;
  navlist: NavItem[];
}

const NavBar: FC<Props> = ({ systemName = '', navlist = [] }) => {
  const { userStore } = useContext(RootStore);
  const [select, setSelect] = useState(navlist[0].link);
  const [userVisible, setUserVisible] = useState(false);
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    setSelect(currentPath);
  }, [location]);
  useEffect(() => {}, []);

  const UserInfo: FC = () => {
    return (
      <div className="user-info">
        <Row>
          <Col className="user-info-title">用户名称：</Col>
          <Col>{userStore.userInfo.用户名}</Col>
        </Row>
      </div>
    );
  };
  return (
    <div className="nav">
      <div className="nav-left">
        <div className="nav-title">{systemName}</div>
      </div>
      <div className="nav-mid">
        {navlist.map(nav => {
          return (
            <Link
              key={nav.link}
              className={`nav-link ${select.indexOf(nav.link) > -1 ? 'select' : ''}`}
              // onClick={() => onSelect(nav.link)}
              to={nav.link}
            >
              {nav.name}
            </Link>
          );
        })}
      </div>
      <div className="nav-right">
        <div className="nav-user">
          <Popover
            content={<UserInfo />}
            trigger="click"
            visible={userVisible}
            onVisibleChange={value => setUserVisible(value)}
            placement="bottomRight"
            overlayStyle={{ borderRadius: 24 }}
          >
            <UserOutlined />
            {userStore.userInfo.用户名}
          </Popover>
        </div>
      </div>
    </div>
  );
};
export default observer(NavBar);
